<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>音频处理Web Audio API测试</title>
    <style>
        @-webkit-keyframes loading{
        0,100%{color:#dcdcdc}
        50%{color:#777}
        }
        @-moz-keyframes loading{
        0,100%{color:#dcdcdc}
        50%{color:#777}
        }
        @keyframes loading{
        0,100%{color:#dcdcdc}
        50%{color:#777}
        }
        *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
        body{background:#f9f9f9;color:#333;font-family:Helvetica,sans-serif;font-size:16px;line-height:1.35em;margin:0;}
        h1{font-size: 2em;font-weight: normal;}
        h2{font-size:1.7em;font-weight:400}
        h2{margin-top:2em}
        h3{color:#777;font-size:1.2em;font-weight:100;text-align:center}
        p{cursor:default}
        a{color:#1f8dba}
        a:focus,a:hover{color:#45b3e0}
        hr{height:1px;background:#dcdcdc;border:0}
        li{margin-bottom:.1em}
        button{-webkit-transition:all 1s ease 0;-moz-transition:all 1s ease 0;-o-transition:all 1s ease 0;transition:all 1s ease 0;background:#f9f9f9;border:.3em solid #dcdcdc;border-radius:50%;color:#777;cursor:pointer;display:inline-block;font-size:1em;height:6.5em;margin:.1em .2em;outline:0;vertical-align:top;width:6.5em;-webkit-tap-highlight-color:transparent}
        button:nth-child(3n){display:block;margin-left:auto;margin-right:auto}
        button.active{-webkit-transition:all 1s ease 0;-moz-transition:all 1s ease 0;-o-transition:all 1s ease 0;transition:all 1s ease 0;background:#e7f3ff;border-color:#87ceeb}
        button.inactive{-webkit-transition:all 1s ease 0;-moz-transition:all 1s ease 0;-o-transition:all 1s ease 0;transition:all 1s ease 0;background:#f9f9f9;border-color:#dcdcdc}
        button:hover{-webkit-transition:all 0 ease 0;-moz-transition:all 0 ease 0;-o-transition:all 0 ease 0;transition:all 0 ease 0;border-color:#87ceeb}
        form{display:none}
        .loading{-webkit-animation:loading 1.5s linear infinite;-moz-animation:loading 1.5s linear infinite;animation:loading 1.5s linear infinite}
        .content{margin:0 auto;max-width:35em}
        .content-wide{margin:0 auto;max-width:50em}
        .playground{border-top:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;background:#fff;margin:2.1em -2em 0 -2em;overflow:hidden;padding:0 2em 2em 2em}
        .widget{float:left;padding:0 0 1.6em 0;position:relative;text-align:center;width:33%}
        .widget:first-child,.widget:last-child{border-right:0}
        .widget-items{text-align:center;width:100%}
        .widget-items div{display:inline-block !important;height:6.5em;margin:.1em .2em;vertical-align:top;width:6.5em}
        .float-none{float:none !important}
        .widget-vis{margin:1.7em 0 0 0;padding:0;position:relative}
        .widget-vis p{color:#777;margin:0;padding:0 1em;position:absolute;text-align:center;top:33%;width:100%}
        .playing{background:#e7f3ff}
        #vis-div{height:5em;width:100%}
        #master-volume{color:#777 !important;display:none;font-family:Helvetica,sans-serif !important;font-size:1em !important;font-weight:400 !important;margin-top:35px !important;opacity:1;-webkit-text-fill-color:#777}
        @media only screen and (max-width:800px){.playground,.widget-items{padding-left:1em;padding-right:1em}
            .widget{padding-bottom:0}
            h2{margin-top:1.5em}
            .widget-items div,button{margin-bottom:5px}
        }
        @media only screen and (max-width:500px){body{padding-left:1em;padding-right:1em}
            .playground{margin-left:-1em;margin-right:-1em}
            .widget-items{padding-left:0;padding-right:0}
        }
        @media only screen and (max-width:430px){button{font-size:14px}
            #master-volume{font-size:14px !important;margin-left:-73px !important;margin-top:28px !important}
            .widget-items canvas,.widget-items div{height:91px !important;width:91px !important}
        }

    </style>
</head>

<body>
<h1>音频处理Web Audio</h1>
<div class="playground">
    <div class="content-wide">
        <div class="widget widget-vis" id="vis-div">
            <p>点击一个左侧音频文件</p>
            <canvas id="vis"></canvas>
        </div>
        <div class="widget widget-loops">
            <h3>音频</h3>
            <div class="widget-items">
                <button id="button-loop-1" type="button" form="form" value="1" data-name="1" class="loading" disabled="">loading</button>
                <button id="button-loop-2" type="button" form="form" value="2" data-name="2" class="loading" disabled="">loading</button>
                <button id="button-loop-3" type="button" form="form" value="3" data-name="3" class="loading" disabled="">loading</button>
            </div>
        </div>
        <div class="widget widget-controls">
            <h3>控制</h3>
            <div class="widget-items">
                <button id="master-volume" type="button" form="form" disabled="" data-value="93">音量</button>
                <button id="button-play" type="button" form="form" disabled="">播放所有</button>
                <button id="button-stop" type="button" form="form" disabled="">停止所有</button>
            </div>
        </div>
        <div class="widget widget-effects">
            <h3>效果</h3>
            <div class="widget-items">
                <button id="effect-1" type="button" form="form" value="1" data-name="Cave" class="loading" disabled="">loading</button>
                <button id="effect-2" type="button" form="form" value="2" data-name="Lodge" class="loading" disabled="">loading</button>
                <button id="effect-3" type="button" form="form" value="3" data-name="Parking Garage" disabled="">loading</button>
            </div>
        </div>
    </div>
</div>
<form id="form"></form>
<script src="/static/audioapi/data/jquery-2.0.3.min.js"></script>
<script src="/static/audioapi/data/jquery.knob.custom.js?v1"></script>
<script src="/static/audioapi/data/audio.js?v2"></script>
</body>

</html>